<template>
  <FooterLayout :footer-style="footerStyle">
    <view class="tabbar">
      <view
        v-for="tab in tabs"
        :key="tab.key"
        class="tabbar-item"
        :class="{ active: tab.key === activeKey }"
        @click="onTabChange(tab)"
      >
        <view class="icon">
          <image mode="aspectFit" :src="tab.key === activeKey ? tab.iconActive || tab.icon : tab.icon" />
        </view>
        <view class="title">{{ tab.title }}</view>
      </view>
    </view>
  </FooterLayout>
</template>

<script setup lang="ts">
import FooterLayout from '@/layout/page/footer.vue'

export type TabItem = {
  key: string
  title: string
  icon: string
  iconActive?: string
  buttonId: string
  [prop: string]: any
}

/**
 * Props
 */
const props = defineProps<{
  tabs: TabItem[]
  activeKey: string
}>()

/**
 * Emit
 */
const emit = defineEmits<{
  (event: 'update:activeKey', key: string): void
  (event: 'change', tab: TabItem): void
}>()

const footerStyle = {
  backgroundColor: '#ffffff',
}

function onTabChange(tab: TabItem) {
  if (props.activeKey === tab.key) return

  emit('update:activeKey', tab.key)
  emit('change', tab)
}
</script>

<style lang="less">
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  border-top: 1px solid #f4f4f6;
}
.tabbar-item {
  flex: 1;
  height: 100%;
  padding: 30rpx 0 10rpx;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  color: rgba(var(--dark-vector), 0.6);
  font-size: 20rpx;
  font-weight: 500;
  &.active {
    color: var(--dark-color);
    font-weight: 600;
  }
  .icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 4rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
